<template>
  <div class="onlineCourseFinishDetail">
    <div class="flex mb_40 justify_between" :class="{ mb_20: isView }">
      <div class="flex items_center">
        <div class="blue_hint mr_8" v-if="isView == 1"></div>
        <div class="online_course_detail_title">学员统计汇总</div>
        <a-tooltip placement="topLeft" v-if="isView !== 1">
          <template #title>
            <span
              >统计对象为当前加入课程的学员人数，包括管理员添加的学员，不包括删除、封禁的学员</span
            >
          </template>
          <InfoCircleOutlined />
        </a-tooltip>
      </div>
    </div>
    <a-table :dataSource="dataSource" :columns="columns" :pagination="false">
      <template #department_name="{ text }">
        <span class="mr_5"> {{ text }} </span>
        <a-tooltip placement="topLeft">
          <template #finishTitle>
            <span>{{ text }}</span>
          </template>
          <MessageOutlined v-if="!isView" />
        </a-tooltip>
      </template>
      <template #finishTitle>
        <div>完成率</div>
        <div class="name_en">线上课</div>
      </template>
      <template #checkTitle>
        <div>考勤率</div>
        <div class="name_en">线下课</div>
      </template>
      <template #passUpTitle>
        <div>通过率</div>
        <div class="name_en">线上考试</div>
      </template>
      <template #passDownTitle>
        <div>通过率</div>
        <div class="name_en">线下考试</div>
      </template>
      <template #submitDownTitle>
        <div>提交率</div>
        <div class="name_en">线下作业</div>
      </template>
      <template #submitAskTitle>
        <div>提交率</div>
        <div class="name_en">评价问卷</div>
      </template>
    </a-table>
    <Pagination
      :currentPage="currentPage"
      :total="Number(total)"
      :pageSize="pageSize"
      @page-change="PageChange"
    />
  </div>
</template>

<script>
import Pagination from "./Pagination.vue";
import { InfoCircleOutlined, MessageOutlined } from "@ant-design/icons-vue";
export default {
  props: {
    isView: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      courseData: [
        { id: 1, name: "评价1" },
        { id: 2, name: "评价2" },
        { id: 3, name: "评价3" },
      ],
      evaluationData: [{ id: 1, name: "选择评价卡" }],
      evaluation: 1,
      course: 1,
      checked: true,
      pageSize: 3,
      total: 0,
      currentPage: 1,
      dataSource: [
        {
          student: "张瑶",
          key: "1",
          department_name: "产品部",
          finish: 10,
          check: 10,
          passUp: 10,
          passDown: 10,
          submitDown: 10,
          submitAsk: 10,
        },
        {
          student: "张瑶",
          key: "1",
          department_name: "产品部",
          finish: 10,
          check: 10,
          passUp: 10,
          passDown: 10,
          submitDown: 10,
          submitAsk: 10,
        },
      ],

      columns: [
        {
          title: "学员",
          dataIndex: "student",
          key: "student",
          slots: { customRender: "student" },
        },
        {
          title: "部门",
          dataIndex: "department_name",
          key: "department_name",
          slots: { customRender: "department_name" },
        },
        {
          align: "right",
          dataIndex: "finish",
          key: "finish",
          slots: { title: "finishTitle" },
        },
        {
          align: "right",
          dataIndex: "check",
          key: "check",
          slots: { title: "checkTitle" },
        },
        {
          align: "right",
          dataIndex: "passUp",
          key: "passUp",
          slots: { title: "passUpTitle" },
        },
        {
          align: "right",
          dataIndex: "passDown",
          key: "passDown",
          slots: { title: "passDownTitle" },
        },

        {
          align: "right",
          dataIndex: "submitDown",
          key: "submitDown",
          slots: { title: "submitDownTitle" },
        },
        {
          align: "right",
          dataIndex: "submitAsk",
          key: "submitAsk",
          slots: { title: "submitAskTitle" },
        },
      ],
    };
  },
  components: { MessageOutlined, InfoCircleOutlined, Pagination },
  methods: {
    focus(val) {},
    handleChange(val) {},
    // 点击页码
    PageChange(page) {
      // this.getUserList(this.pageSize, (page - 1) * this.pageSize);
    },
  },
};
</script>
<style lang="less" scoped>
div {
  font-family: "PingFang SC";
  font-style: normal;
}
.flex {
  display: flex;
}
.items_center {
  align-items: center;
}
.justify_between {
  justify-content: space-between;
}
.mb_40 {
  margin-bottom: 40px;
}
.mb_20 {
  margin-bottom: 20px;
}
.mr_8 {
  margin-right: 8px;
}
.mr_5 {
  margin-right: 5px;
}
.onlineCourseFinishDetail {
  // display: inline-block;
  padding: 18px 24px 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #e5e6eb;
}
.online_course_detail_title {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  margin-right: 5px;
}
.question_title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 214px;
  height: 44px;
}
.name_en {
  font-size: 12px;
  color: gray;
}
.blue_hint {
  width: 8px;
  height: 22px;
  background: #0093ff;
}
</style>
